<template>
    <TopNav />
    <div class="wrap">
        <div class="top_wrap">
            <div class="left">
                <div class="order_number">
                    <span class="label"><el-tag type="primary">单号</el-tag></span>
                    <span class="content">{{ row?.checkNumber }}</span>
                </div>
                <div style="width: 100%">
                    <el-button size="large" type="primary" style="width: 100%;height: 85px;"
                     :disabled="row?.statusText ==='已完成'"   @click="submitCheckOrder">提交</el-button>
                </div>

            </div>
            <div class="right">
                <div class="right_top">


                    <MyInput @click="showSearchKeyboard" placeholder="请输入商品首字母搜索" :innerText="goodsSearchKeywords"
                        class="item" style="width: 100%;" />
                    <WeightAndTare />
                </div>
                <div class="goods_group">
                    <div class="first_group">
                        <template v-if="firstGroup.length <= 7">

                            <el-button @click="chooseFirstGroup(item, index)"
                                :type="currentFirstGroupIndex == index ? 'primary' : 'default'"
                                v-for="(item, index) in firstGroup" :key="index" size="large">{{
                        item.goodsGroupName_K
                    }}</el-button>
                        </template>
                        <template v-else>
                            <el-button @click="chooseFirstGroup(item, index)"
                                :type="currentFirstGroupIndex == index ? 'primary' : 'default'"
                                v-for="(item, index) in firstGroup.slice(0, 6)" :key="index" size="large">{{
                        item.goodsGroupName_K }}</el-button>

                            <el-popover placement="bottom" :width="1000" trigger="click"
                                :visible="firstGroupPopoverVisible">
                                <template #reference>
                                    <el-button size="large" icon="ArrowDownBold"
                                        @click="firstGroupPopoverVisible = !firstGroupPopoverVisible">更多</el-button>
                                </template>
                                <div class="more_btns">
                                    <el-button @click="chooseFirstGroup(item, index)"
                                        :type="currentFirstGroupIndex == index ? 'primary' : 'default'"
                                        v-for="(item, index) in firstGroup" :key="index" size="large">{{
                        item.goodsGroupName_K }}</el-button>
                                </div>

                            </el-popover>

                        </template>

                    </div>
                    <div class="second_group">
                        <template v-if="secondGroup.length <= 7">
                            <el-button @click="chooseSecondGroup(item, index)"
                                :type="currentSecondGroupIndex == index ? 'primary' : 'default'"
                                v-for="(item, index) in secondGroup" :key="index" size="large">{{
                        item.goodsGroupName_K
                    }}</el-button>
                        </template>
                        <template v-else>
                            <el-button @click="chooseSecondGroup(item, index)"
                                :type="currentSecondGroupIndex == index ? 'primary' : 'default'"
                                v-for="(item, index) in secondGroup.slice(0, 6)" :key="index" size="large">{{
                        item.goodsGroupName_K }}</el-button>

                            <el-popover placement="bottom" :width="1000" trigger="click"
                                :visible="secondGroupPopoverVisible">
                                <template #reference>
                                    <el-button size="large" icon="ArrowDownBold"
                                        @click="secondGroupPopoverVisible = !secondGroupPopoverVisible">更多</el-button>
                                </template>
                                <div class="more_btns">
                                    <el-button @click="chooseSecondGroup(item, index)"
                                        :type="currentSecondGroupIndex == index ? 'primary' : 'default'"
                                        v-for="(item, index) in secondGroup" :key="index" size="large">{{
                        item.goodsGroupName_K }}</el-button>
                                </div>

                            </el-popover>

                        </template>

                    </div>
                </div>
            </div>
        </div>
        <div class="goods_list" ref="goodsListWrapRef" v-if="currentPageData.length > 0">

            <div v-for="(item, index) in currentPageData" class="item"
                :class="{ active: currentSelectGoods?.goodsID === item.goodsID }" @click="selectGoods(item)">
                <div class="goods_name">{{ item.goodsName }}</div>
                <div class="info">
                    <div><span>{{ item.checkQuantity }}</span><span class="item1">盘</span></div>
                    <div><span>{{ item.inventoryQuantity }}</span><span class="item2">库</span></div>
                    <div><span :class="item.proFitLossQuantity >= 0 ? 'green' : 'red'">{{ item.proFitLossQuantity
                            }}</span><span class="item3">盈</span></div>
                </div>
            </div>

            <el-button v-if="currentPageNo > 1" @click="currentPageNo--" style="height: 100%;">上一页</el-button>
            <el-button type="primary" v-if="currentPageNo < totalPages" @click="currentPageNo++"
                style="height: 100%;margin-left: 0;">下一页</el-button>

        </div>
        <div class="empty" v-else>
            <el-empty description="未搜索到商品，请更换关键字或选择其它分组" />
        </div>
    </div>


    <!--搜索键盘-->
    <SearchKeyboard v-model="isShowSearchKeyboard" keyboardContainerClass="newcheck_goods_class"
        @onChange="onSearchKeyboardChange"></SearchKeyboard>

    <!--盘点键盘-->
    <CheckKeyboard :isShowPoint="currentSelectGoods?.isQuantityUnitText == 'n' ? true : false"
        @onKeyPress="onCheckKeyboardKeyPress" v-model="isShowChcekKeyboard"
        keyboardContainerClass="newcheck_check_class" @onChange="onCheckKeyboardChange" ref="checkKeboardRef"
        :title="`${currentSelectGoods?.goodsName}`">
        <template #default>
            <div class="check_log_top_wrap">
                <div class="check_log_flex">

                    <div class="row">
                        <span class="label">盘点</span>
                        <span>{{ currentCheckQuantity }}</span>
                    </div>
                    <div class="row">
                        <span class="label">库存</span>
                        <span>{{ currentSelectGoods?.inventoryQuantity }} </span>
                    </div>
                    <div class="row">
                        <span class="label">损益</span>
                        <span
                            :class="currentCheckQuantity - currentSelectGoods?.inventoryQuantity >= 0 ? 'green' : 'red'">{{
                        currentCheckQuantity === null ? null :
                            NP.minus(currentCheckQuantity, currentSelectGoods?.inventoryQuantity)

                    }}</span>
                    </div>


                </div>
                <div class="weight_row">
                    <div class="row">
                    <span>净重/kg:</span>
                    <span style="color:var(--el-color-success)">{{ weight }}</span>
                </div>
                <div class="row">
                    <span>皮重/kg:</span>
                    <span style="color:var(--el-color-danger)">{{ tare }}</span>
                </div>
                </div>
                
                    
               
            </div>
        </template>


        <template #right>
            <div class="checklog_list">
                <!-- :header-cell-style="{ backgroundColor: 'var(--ev-c-black)', color: '#fff' }"  :header-cell-style="{ backgroundColor: 'var(--el-color-primary)', color: '#fff' }" -->
                <el-table border tripe :data="currentCheckLogList" ref="checkLogTableRef"
                    @current-change="handleCurrentChange" highlight-current-row class-name="my_table">
                    <el-table-column type="index" width="60" />

                    <el-table-column prop="num" :label="currentSelectGoods?.isQuantityUnitText == 'n' ? '重量' : '数量'">
                        <template #default="scope">
                            <MyInput size="large" :innerText="scope.row.num" style="width: 160px;"
                                :placeholder="`请输入${currentSelectGoods?.isQuantityUnitText == 'n' ? '重量' : '数量'}`" />
                        </template>

                    </el-table-column>

                    <el-table-column label="操作" style="padding: 0;" width="230">
                        <template #default="scope">
                            <el-button type="danger" v-if="scope.$index > 0" size="large"
                                @click.stop="delCheckLog(scope.$index)">
                                -
                            </el-button>
                            <el-button type="danger" v-else size="large" style="visibility: hidden;">
                                -
                            </el-button>
                            <el-button
                                :disabled="currentCheckLogList[scope.$index].num === null || currentCheckLogList[scope.$index].num === ''"
                                type="primary" size="large" @click.stop="addCheckLog(scope.$index)">
                                +
                            </el-button>
                            <el-button v-if="currentSelectGoods?.isQuantityUnitText=='n'"
                                :disabled="weight===''" type="success" size="large"
                                @click.stop="setRowWeight(scope.row)">
                                落称
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

            </div>
            <!-- <div class="checklog_list" v-for="(item,index) in currentCheckLogList" :key="index" style="width: 50%">
             <el-input v-model="item.num" @click="currentDialogCheckNumIndex=index" />
        </div> -->
        </template>
        <!-- <MyInput  placeholder="请输入盘点数量" :innerText="goodsSearchKeywords"
                        class="item" style="width: 200px" /> -->



    </CheckKeyboard>

</template>


<script setup lang="ts">

//@ts-nocheck
import SearchKeyboard from '@renderer/components/SearchKeyboard.vue'
import CheckKeyboard from '@renderer/components/CheckKeyboard.vue'
import WeightAndTare from '@renderer/components/WeightAndTare.vue'
import NP from 'number-precision'
import pinyin from "pinyin";
import { ElMessage } from 'element-plus'
import { getFirstGroup, getSecondGroup, getCheckDetails, rowSave, reCheck, submitCheck } from '@renderer/api/newcheck'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@renderer/store/user'
import { useRouter, useRoute } from "vue-router";
import { ref, onMounted, computed, h, nextTick } from 'vue'
import { onUnmounted } from 'vue';

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
const { userInfo, shopInfo, weight,tare } = storeToRefs(userStore)
const shopID = shopInfo.value.shopID
const saleOrganizationID = userInfo.value.user_organizationId
const row = ref() //上一页传过来的row
const checkLogTableRef = ref()
const checkKeboardRef = ref()
const currentCheckLogList = ref([
    { num: 1 }
]) //当前盘点记录数组
const checkLogPageSize = 4 //判断记录每页多少条
const currentDialogCheckNumIndex = ref(0) //当前盘点输入框聚焦索引
const currentCheckLogRow = ref(null)
const isShowSearchKeyboard = ref(false)
const isShowChcekKeyboard = ref(false)
const tableData = ref([
    {
        num: 10,
    }, {
        num: 13
    }
])
const currentSelectGoods = ref(null)
const goodsSearchKeywords = ref('') //搜索关键字
const currentPageNo = ref(1) //当前页
const pageSize = ref(36)  //分页页码
const firstGroup = ref([])

const hasLoadedFirstGroupGoodsData = ref({}) //已经加载过的一级分组全部商品 {"一级分组group_ID_K":[]...}
const hasLoadedFirstGroupAndSecondGroup = ref({}) //已经加载过的一级分组下的二级分组 {"一级分组group_ID_K":[二级分组]...}
const firstGroupPopoverVisible = ref(false)
const secondGroupPopoverVisible = ref(false)
const currentFirstGroupIndex = ref(0) //一级分组选中索引
const secondGroup = ref([])
const currentSecondGroupIndex = ref(0)//二级分组选中索引
const currentFirstGroupGoodsList = ref([]) //当前一级分组下的全部商品
const currentSecondGroupGoodsList = computed(() => { //当前选中的一级、二级分组的数据
    if (currentSecondGroupIndex.value == 0) {
        return currentFirstGroupGoodsList.value
    } else {
        
        return currentFirstGroupGoodsList.value.filter(item => item.groupID_K == secondGroup.value[currentSecondGroupIndex.value].goodsGroupID_K)
    }

})

// onMounted(async()=>{


// })


//是否选择商品
const isSelectGoods = computed(() => {
    return currentSelectGoods.value !== null
})


onMounted(async () => {
    //读取上页行数据
    row.value = JSON.parse(route.query.row)
    
    try {
            //一级分组
    await getFirstGroupData()

// // // //二级分组
await getSecondGroupData()

// // // //查询一级分组下的全部商品
await getCheckDetailsData()
    } catch (error) {
      console.log(error)  
    }


  
})


async function getFirstGroupData() {
    try {
        const { data } = await getFirstGroup(saleOrganizationID, shopID, row.value.checkTemplateID)
    firstGroup.value = data 
    } catch (error) {
        console.log(error)
    }
   
    // .concat({ goodsGroupName_K: '新加1' }, { goodsGroupName_K: '新新加2新加2新加2新加2加2' }, { goodsGroupName_K: '新加3' })

}

async function getSecondGroupData() {
    const firstGoodsGroupID = firstGroup.value.find((item, index) => index == currentFirstGroupIndex.value).goodsGroupID_K
    if (!hasLoadedFirstGroupAndSecondGroup.value[firstGoodsGroupID]) {
        try {
            const { data } = await getSecondGroup(saleOrganizationID, shopID, row.value.checkTemplateID, firstGoodsGroupID)
        data.unshift({
            goodsGroupID_K: '',
            goodsGroupName_K: '全部'
        })
        secondGroup.value = data
        hasLoadedFirstGroupAndSecondGroup.value[firstGoodsGroupID] = data
        } catch (error) {
            console.log(error)
        }
       
    } else {
        secondGroup.value = hasLoadedFirstGroupAndSecondGroup.value[firstGoodsGroupID]
    }

}
async function getCheckDetailsData() {
    const groupID_k = firstGroup.value[currentFirstGroupIndex.value].goodsGroupID_K
    if (!hasLoadedFirstGroupGoodsData.value[groupID_k]) {
        try {
            const { data } = await getCheckDetails(saleOrganizationID, shopID, row.value.checkTemplateID, groupID_k, row.value.id)
        currentFirstGroupGoodsList.value = data
        hasLoadedFirstGroupGoodsData.value[groupID_k] = data            
        } catch (error) {
            console.log(error)
        }

    } else {
        currentFirstGroupGoodsList.value = hasLoadedFirstGroupGoodsData.value[groupID_k]
    }


}


async function chooseFirstGroup(item, index) {

    currentFirstGroupIndex.value = index
    currentPageNo.value = 1

    //选中全部
    currentSecondGroupIndex.value = 0
    //  if (!hasLoadedFirstGroupGoodsData.value[item.goodsGroupID_K]) { //未加载过 
        try {
                //根据1级分组查询数据
    await getCheckDetailsData()
    //查询二级分组数据
    await getSecondGroupData()
    //     hasLoadedFirstGroupGoodsData.value[item.goodsGroupID_K] = currentFirstGroupGoodsList.value

    // } else {
    //     currentFirstGroupGoodsList.value = hasLoadedFirstGroupGoodsData.value[item.goodsGroupID_K]
    // }

    firstGroupPopoverVisible.value = false
        } catch (error) {
            
        }

}

function chooseSecondGroup(item, index) {
    currentSecondGroupIndex.value = index
    currentPageNo.value = 1
    secondGroupPopoverVisible.value = false
}

const totalPages = computed(() => {
    return Math.ceil((currentSecondGroupGoodsList.value
        .filter(item => {
            const pinyinItem = pinyin(item.goodsName, {
                style: pinyin.STYLE_FIRST_LETTER //首字母模式
            }).join('')
            return pinyinItem.indexOf(goodsSearchKeywords.value) != -1
        }).length - (pageSize.value - 1)) / (pageSize.value - 2)) + 1;
})
//当前页数据
const currentPageData = computed(() => {
    let items = currentSecondGroupGoodsList.value.filter(item => {
        const pinyinItem = pinyin(item.goodsName, {
            style: pinyin.STYLE_FIRST_LETTER //首字母模式
        }).join('')
        //console.log(pinyinItem)
        return pinyinItem.indexOf(goodsSearchKeywords.value) != -1
    })
    // console.log(items)
    const itemsPerPageFirstPage = pageSize.value - 1
    const itemsPerPageOtherPages = pageSize.value - 2

    let start, end;
    if (currentPageNo.value === 1) {
        start = 0;
        end = itemsPerPageFirstPage;
    } else if (currentPageNo.value === totalPages.value) {
        start = itemsPerPageFirstPage + (totalPages.value - 2) * itemsPerPageOtherPages;
        end = items.length;
    } else {
        start = itemsPerPageFirstPage + (currentPageNo.value - 2) * itemsPerPageOtherPages;
        end = start + itemsPerPageOtherPages;

    }

    // 分割商品列表
    const paginatedItems = items.slice(start, end);
    return paginatedItems
})

//选择商品
function selectGoods(item, index) {
    currentSelectGoods.value = item
    let row = { num: item.checkQuantity, id: 1 }
    currentCheckLogList.value = [row]
    isShowChcekKeyboard.value = true
    nextTick(() => {
        checkLogTableRef.value?.setCurrentRow(row, true)
    })
}

//表格合计
function getSummaries({ columns, data }) {
    // console.log(columns)
    // console.log(data)
    const sums = data.reduce((prev, currentVal) => {
        return NP.plus(prev, currentVal.num)
    }, 0)
    // return [h('div', { style: { textDecoration: 'underline' } }, [
    //     '合计',
    //   ]),123]
    return [h('div', {}, [
        '合计',
    ]), sums]
}
//搜索商品
function onSearchKeyboardChange(val) {
    console.log('val:' + val)
    goodsSearchKeywords.value = val
}

function showSearchKeyboard() {
    console.log('focus!')
    isShowSearchKeyboard.value = true
    console.log(isShowSearchKeyboard)
}

//切换选中行
function handleCurrentChange(row) {
    if (row) {
        currentCheckLogRow.value = row
        checkKeboardRef.value && checkKeboardRef.value.setKeyboardInput(row.num) //重置键盘值
    }

}

function onCheckKeyboardChange(val) {

    const index = currentCheckLogList.value.findIndex(item => item.id == currentCheckLogRow.value.id)
    currentCheckLogList.value[index].num = val
    // currentCheckLogList.value[currentDialogCheckNumIndex.value].num = val
}

//添加一条盘点记录
function addCheckLog(index) {

    let id = currentCheckLogList.value[index].id + 1
    let newRow = { num: '', id }
    currentCheckLogList.value.splice(index + 1, 0, newRow)
    currentCheckLogRow.value = newRow
    // console.log(checkLogTableRef.value)
    // nextTick(()=>{
    checkLogTableRef.value?.setCurrentRow(newRow, true)
    // })

}
//落称
function setRowWeight(row){
    const index =  currentCheckLogList.value.findIndex(item=>item.id===row.id)
    if(index!==-1){
        row.num = weight.value
        currentCheckLogList.value.num = weight.value
        checkKeboardRef.value && checkKeboardRef.value.setKeyboardInput(weight.value) //重置键盘值
    }

}

//删除一条盘点记录
function delCheckLog(index) {
    currentCheckLogList.value.splice(index, 1)
    checkLogTableRef.value?.setCurrentRow(currentCheckLogList.value[index - 1], true)
}

//当前盘点数
const currentCheckQuantity = computed({
    get() {
        if (currentCheckLogList.value.length == 1 && (currentCheckLogList.value[0].num === null || currentCheckLogList.value[0].num === '')) {
            return null
        } else {
            return currentCheckLogList.value.reduce((prev, currentVal) => {
               
                return NP.plus(prev, currentVal.num ? currentVal.num : 0)
            }, 0)
        }

    },
    set(val) {
        currentCheckLogList.value = [{ id: 1, num: val }]
    }

})

//盘点单行保存
async function checkSave() {
    
    const proFitLossQuantity = NP.minus(currentCheckQuantity.value, currentSelectGoods.value.inventoryQuantity)
    const checkGoodsDtos = [{ ...currentSelectGoods.value, checkQuantity: currentCheckQuantity.value, proFitLossQuantity }]
    try {
        const { msg } = await rowSave(saleOrganizationID, shopID, row.value.id, checkGoodsDtos)
    // const index = currentPageData.value.findIndex(item => item.goodsID === currentSelectGoods.value.goodsID)
    // currentPageData.value.splice(index, 1, { ...currentSelectGoods.value, checkQuantity: currentCheckQuantity.value, proFitLossQuantity })

    const _index = currentFirstGroupGoodsList.value.findIndex(item => item.goodsID === currentSelectGoods.value.goodsID)

    currentFirstGroupGoodsList.value.splice(_index, 1, { ...currentSelectGoods.value, checkQuantity: currentCheckQuantity.value, proFitLossQuantity })
   
    ElMessage({
        message: msg,
        type: 'success',
    })
    isShowChcekKeyboard.value = false
    } catch (error) {
        console.log(error)
    }

}
//按键
async function onCheckKeyboardKeyPress(btn) {
    const shopCheckID = row.value.id
    let message = ''
   
    if (btn === '{cp}') { //重盘
        try {
            const { msg } = await reCheck(saleOrganizationID,row.value.id, currentSelectGoods.value.goodsID)
            checkKeboardRef.value.setKeyboardInput('') //重盘后清空输入值
        currentCheckQuantity.value = null

        // const index = currentPageData.value.findIndex(item => item.goodsID === currentSelectGoods.value.goodsID)
        // currentPageData.value.splice(index, 1, { ...currentSelectGoods.value, checkQuantity: currentCheckQuantity.value, proFitLossQuantity: null })
        const _index = currentFirstGroupGoodsList.value.findIndex(item => item.goodsID === currentSelectGoods.value.goodsID)

currentFirstGroupGoodsList.value.splice(_index, 1, { ...currentSelectGoods.value, checkQuantity: currentCheckQuantity.value, proFitLossQuantity:null })

        ElMessage({
            message: msg,
            type: 'success',
        })
        // isShowChcekKeyboard.value = false
        } catch (error) {
            console.log(error)
        }
     
    } else if (btn === '{pp}') { //盘平
        currentCheckQuantity.value = currentSelectGoods.value.inventoryQuantity
        checkSave()

    } else if (btn === '{bc}') {//保存
        if (currentCheckQuantity.value === null) {
            ElMessage({
                message: '请填写盘点数',
                type: 'warning',
            })
            return
        } else {
            checkSave()
        }
    }


}




//输入
function inputNum() {
    if (!isSelectGoods.value) {
        ElMessage({
            message: '请先选择商品',
            type: 'warning',
        })
        return
    }

}

//确定重量
function confirmWeight() {
    if (!isSelectGoods.value) {
        ElMessage({
            message: '请先选择商品',
            type: 'warning',
        })
        return
    }
}

//提交盘点单
async function submitCheckOrder() {
    const shopCheckID = row.value.id
    const shopName = shopInfo.value.shopName
    try {
        const { msg } = await submitCheck(saleOrganizationID,shopCheckID, shopName)
    ElMessage({
        message: msg,
        type: 'success',
    })
    router.back()
    } catch (error) {
        console.log(error)
    }

}
</script>

<style scoped lang='scss'>
::-webkit-scrollbar {
    width: 30px;
}

/* 定义滚动条轨道 */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* 定义滚动条滑块 */
::-webkit-scrollbar-thumb {
    background: var(--el-color-primary);
    border-radius: 6px;
}

/* 滑块悬停时的样式 */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.nav_right {
    display: flex;
    align-items: center;


}

.wrap {

    height: calc(100% - 50px);
    box-sizing: border-box;
    background-color: var(--ev-c-white);
    overflow: hidden;

    .top_wrap {
        display: flex;
        width: 100%;


        .left {
            width: 30%;
            box-sizing: border-box;
            padding-left: 5px;
            padding-top: 5px;

            .order_number {
                display: flex;
                line-height: 40px;
                height: 40px;
                background-color: var(--el-color-primary-light-7);
                margin-bottom: 5px;
                padding-left: 5px;

                .label {
                    width: 40px;
                }

                .content {
                    text-align: center;
                    flex: 1;
                }
            }
        }

        .right {
            width: calc(70% - 5px);
            padding: 5px 0 0 5px;
            box-sizing: border-box;

            .right_top {
                display: grid;
                // align-items: center;
                margin-bottom: 5px;
                grid-template-columns: 2fr 2fr 2fr 1fr;
                gap: 5px;

                .btns {
                    display: flex;

                    :deep(.el-button) {
                        flex: 1;
                    }
                }

                .item {
                    line-height: 40px;
                    height: 40px;

                    span {
                        font-size: 20px;
                    }

                    .num {
                        color: var(--el-color-danger);

                    }
                }

            }

            .goods_group {

                .first_group,
                .second_group {
                    display: grid;
                    gap: 5px;
                    grid-template-rows: 1fr;
                    grid-template-columns: repeat(7, minmax(90px, 1fr));
                    margin-bottom: 5px;

                }

                .group_name {
                    color: #000;
                    font-size: 16px;
                }

                .active {
                    color: #fff;
                }

                :deep(.el-button) {
                    // border-radius: 0;
                    // border: none;
                    padding: 2px;
                    white-space: break-spaces;

                    span {
                        display: -webkit-box !important;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                    }

                }

                :deep(.el-button+.el-button) {
                    margin-left: 0;

                }
            }
        }
    }

    .goods_list {
        height: calc(100% - 50px - 90px);
        padding: 2px;
        overflow: hidden;
        box-sizing: border-box;
        display: grid;
        gap: 2px;
        grid-template-rows: repeat(6, 1fr);
        grid-template-columns: repeat(6, 1fr);
        background-color: var(--el-color-primary);

        .item {
            // text-indent: 5px;
            background-color: var(--ev-c-white);
            box-sizing: border-box;
            // border: 1px solid #ccc;
            // border-radius: 2px;
            padding: 5px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            &.active {
                background-color: var(--el-color-primary-light-7);

            }

            .goods_name {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
                flex: 1;

            }

            .info {
                flex: 1;
                font-size: 14px;
                text-align: right;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-around;

                span {
                    display: inline-block;

                    &.green {
                        color: var(--el-color-success);
                    }

                    &.red {
                        color: var(--el-color-danger);
                    }
                }

                .item1 {
                    color: var(--el-color-primary);
                    margin-left: 8px;
                }

                .item2 {
                    margin-left: 8px;
                }

                .item3 {
                    color: var(--el-color-info);
                    margin-left: 8px;
                }
            }
        }

    }

    .empty {
        height: calc(100% - 50px - 90px);
        display: flex;
        align-items: center;
        justify-content: center;
    }


    .right {
        width: calc(70% - 5px);
        padding: 5px 0 0 5px;

        box-sizing: border-box;

        .right_top {
            display: grid;
            // align-items: center;
            margin-bottom: 5px;
            grid-template-columns: 2fr 2fr 2fr 1fr;
            gap: 5px;

            .btns {
                display: flex;

                :deep(.el-button) {
                    flex: 1;
                }
            }

            .item {
                line-height: 40px;
                height: 40px;

                span {
                    font-size: 20px;
                }

                .num {
                    color: var(--el-color-danger);

                }
            }
        }

        .goods_group {

            .first_group,
            .second_group {
                display: grid;
                gap: 5px;
                grid-template-rows: 1fr;
                grid-template-columns: repeat(7, minmax(90px, 1fr));
                margin-bottom: 5px;

            }

            .group_name {
                color: #000;
                font-size: 16px;
            }

            .active {
                color: #fff;
            }

            :deep(.el-button) {
                // border-radius: 0;
                // border: none;
                padding: 2px;
                white-space: break-spaces;

                span {
                    display: -webkit-box !important;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                }

            }

            :deep(.el-button+.el-button) {
                margin-left: 0;

            }
        }

        .goods_list {
            height: calc(100% - 50px - 90px);
            padding: 2px;
            overflow: hidden;
            box-sizing: border-box;
            display: grid;
            gap: 2px;
            grid-template-rows: repeat(6, 1fr);
            grid-template-columns: repeat(6, 1fr);
            background-color: var(--el-color-primary);

            .item {
                // text-indent: 5px;
                background-color: var(--ev-c-white);
                box-sizing: border-box;
                // border: 1px solid #ccc;
                // border-radius: 2px;
                padding: 5px;
                display: flex;
                align-items: center;
                justify-content: space-between;

                &.active {
                    background-color: var(--el-color-primary-light-7);

                }

                .goods_name {
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 5;
                    overflow: hidden;
                    flex: 1;

                }

                .info {
                    flex: 1;
                    font-size: 14px;
                    text-align: right;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;

                    span {
                        display: inline-block;

                        &.green {
                            color: var(--el-color-success);
                        }

                        &.red {
                            color: var(--el-color-danger);
                        }
                    }

                    .item1 {
                        color: var(--el-color-primary);
                        margin-left: 8px;
                    }

                    .item2 {
                        margin-left: 8px;
                    }

                    .item3 {
                        color: var(--el-color-info);
                        margin-left: 8px;
                    }
                }
            }

        }

        .empty {
            height: calc(100% - 50px - 90px);
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}

.more_btns {
    // display: flex;
    // flex-wrap: wrap;
    // align-items: center;
    display: grid;
    grid-template-columns: repeat(6, minmax(100px, 1fr));

    :deep(.el-button) {
        margin: 0 0 10px 10px;
        white-space: break-spaces;
    }

    :deep(.el-button+.el-button) {
        margin: 0 0 10px 10px;


    }
}

.check_log_top_wrap {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    &>div{
        flex: 1;
    }
    .weight_row{
        display: flex;
        align-items: center;
        font-size: 16px;
        &>div{
            display: flex;
        align-items: center;
            flex: 1;
        }
    }
}

.check_log_flex {
    display: flex;
    align-items: center;
    width: 50%;
    font-size: 16px;


    .row {
        flex: 1;
        color: #000;

        .label {
            margin-right: 10px;
            color: var(--el-color-info);
        }

        .green {
            color: var(--el-color-success);
        }

        .red {
            color: var(--el-color-danger);
        }

        &:nth-child(1) {
            color: var(--el-color-primary);

        }

    }

}

.weight_and_tare {
    display: flex;
    align-items: center;
    width: 50%;

    :deep(>div) {
        flex: 1;
    }


}

.checklog_list {
    padding-right: 10px;
    width: 50%;
    box-sizing: border-box;
    height: 400px;
    overflow-y: auto;

}
</style>